<template>
  <div id="message">
    <top-bar title="消息"></top-bar>
    <div class="container1" v-if="getMessageList">
      <message-item v-for="(item,index) in getMessageList" :key="index" :info="item"></message-item>
    </div>
    <md-result-page
      class="result-page customized"
      :img-url="require('@/assets/imgs/message_empty.png')"
      :text="undefined"
      subtext="您没有消息哟"
      v-if="getMessageList&&getMessageList.length<=0"
    ></md-result-page>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar';
import MessageListItem from './items/MessageListItem';
import { mapGetters } from 'vuex';
import { ResultPage } from 'mand-mobile';
export default {
  name: 'message',
  components: {
    [TopBar.name]: TopBar,
    [MessageListItem.name]: MessageListItem,
    [ResultPage.name]: ResultPage
  },
  created() {
    this.$store.dispatch('getMessageList');
  },
  computed: {
    ...mapGetters(['getMessageList'])
  }
};
</script>

<style lang="stylus">
#message {
  background-color: color-primary-background;
  height: 100vh;

  .container1 {
    margin-top: 20px;
  }

  .result-page {
    height: calc(100vh - 300px);

    .text {
      display: none;
    }

    .subtext {
      font-size: 28px;
      margin-top: 20px;
    }
  }
}
</style>
